<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Icons</title>
    <link rel="stylesheet" href="./common/css/my.icons.css">
    <style>
        body {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            align-items: center;
            margin: 1em;
        }

        body>div {
            width: 5em;
            position: relative;
            margin: 1em;
            padding: 0.5em;
            font-size: 12px;
            text-align: center;
            transition: transform .3s ease-in-out;
        }

        .icon {
            width: 100%;
            height: 0;
            padding-bottom: 100%;
        }

        body>div:hover {
            transform: scale(2);
            z-index: 2;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .primary {
            background-color: #15b2e2;
        }
        body>div.primary:hover {
            background-color: #15b2e2;
        }
    </style>
</head>

<body>
    <input id="iconsize" style="width: 100%;outline: 0;" placeholder="...em" />
    <div>
        <div class="icon icon-add"></div>
    </div>
    <div>
        <div class="icon icon-edit"></div>
    </div>
    <div>
        <div class="icon icon-save"></div>
    </div>
    <div>
        <div class="icon icon-cut"></div>
    </div>
    <div>
        <div class="icon icon-no"></div>
    </div>
    <div>
        <div class="icon icon-cancel"></div>
    </div>
    <div>
        <div class="icon icon-print"></div>
    </div>
    <div>
        <div class="icon icon-undo"></div>
    </div>
    <div>
        <div class="icon icon-back"></div>
    </div>
    <div>
        <div class="icon icon-sum"></div>
    </div>
    <div>
        <div class="icon icon-tip"></div>
    </div>
    <div>
        <div class="icon icon-filter"></div>
    </div>
    <div>
        <div class="icon icon-lock"></div>
    </div>
    <div>
        <div class="icon icon-up"></div>
    </div>
    <div>
        <div class="icon icon-save-primary"></div>
    </div>
    <div>
        <div class="icon icon-tip-off"></div>
    </div>
    <div>
        <div class="icon icon-magic"></div>
    </div>
    <div>
        <div class="icon icon-help"></div>
    </div>
    <div>
        <div class="icon icon-redo"></div>
    </div>
    <div>
        <div class="icon icon-preview"></div>
    </div>
    <div>
        <div class="icon icon-more"></div>
    </div>
    <div>
        <div class="icon icon-cascade"></div>
    </div>
    <div>
        <div class="icon icon-component"></div>
    </div>
    <div>
        <div class="icon icon-copy"></div>
    </div>
    <div>
        <div class="icon icon-edit2"></div>
    </div>
    <div>
        <div class="icon icon-clone"></div>
    </div>
    <div class="primary">
        <div class="icon icon-ok"></div>
    </div>
    <div>
        <div class="icon icon-ok"></div>
    </div>
    <div>
        <div class="icon icon-reload"></div>
    </div>
    <div>
        <div class="icon icon-download"></div>
    </div>
    <div>
        <div class="icon icon-upload"></div>
    </div>
    <div>
        <div class="icon icon-detail"></div>
    </div>
    <div>
        <div class="icon icon-tree"></div>
    </div>
    <div>
        <div class="icon icon-clear"></div>
    </div>
    <div>
        <div class="icon icon-man"></div>
    </div>
    <div>
        <div class="icon icon-book"></div>
    </div>
    <div>
        <div class="icon icon-script"></div>
    </div>
    <div>
        <div class="icon icon-manage"></div>
    </div>
    <div>
        <div class="icon icon-export"></div>
    </div>
    <div>
        <div class="icon icon-import"></div>
    </div>
    <div>
        <div class="icon icon-link"></div>
    </div>
    <div>
        <div class="icon icon-pin"></div>
    </div>
    <div>
        <div class="icon icon-expxls"></div>
    </div>
    <div>
        <div class="icon icon-exppage"></div>
    </div>
    <div>
        <div class="icon icon-remove"></div>
    </div>
    <div>
        <div class="icon icon-filetext"></div>
    </div>
    <div>
        <div class="icon icon-search"></div>
    </div>
    <div>
        <div class="icon icon-setting"></div>
    </div>
    <div>
        <div class="icon icon-singleSelect"></div>
    </div>
    <div class="primary"><div class="icon icon-all-left"></div></div>
    <div class="primary"><div class="icon icon-all-right"></div></div>
    <div><div class="icon icon-filetext"></div></div>
    <div><div class="icon icon-calendar"></div></div>
    <div><div class="icon icon-search-primary"></div></div>
    <div class="primary"><div class="icon icon-save"></div></div>
    <div><div class="icon icon-mini-add"></div></div>
    <div><div class="icon icon-mini-edit"></div></div>
    <div><div class="icon icon-mini-refresh"></div></div>
    <div><div class="icon icon-large-picture"></div></div>
    <div><div class="icon icon-large-clipart"></div></div>
    <div><div class="icon icon-large-smartart"></div></div>
    <div><div class="icon icon-large-shapes"></div></div>
    <div><div class="icon icon-large-chart"></div></div>
    <div><div class="icon tree-folder"></div></div>
    <div><div class="icon tree-folder-open"></div></div>
    <div><div class="icon tree-file"></div></div>


    <script>
        let size = document.querySelector('#iconsize');
        size.addEventListener('change', e => {
            document.querySelectorAll('body > div').forEach((div) => {
                div.style.width = e.target.value + 'em';
            })
        })
        document.querySelectorAll('.icon').forEach(div => {
            let name = document.createElement('span');
            name.textContent = div.className.split(' ').pop();
            div.parentNode.appendChild(name);
        })
    </script>
</body>

</html>